<template>
    <div class="col-box" :class="data.visible ? 'show' : 'hide'">
        <div class="box-header">
            <div class="box-title">{{ title }}</div>
            <CloseOutlined @click="close" class="close-icon" title="关闭" />
        </div>
        <div class="box-content">
           <colTreeNode :colData="colData"></colTreeNode>
        </div>
        <!--  <FontSizeOutlined v-if="item.type == 'string'"/>
                        <NumberOutlined v-if="item.type == 'number'"/> -->
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import colTreeNode from './colTreeNode.vue';

const props = defineProps({
    title: {
        type: String,
        default: '测试标题'
    },
    colData: {
        type: Array,
        default: () => {
            return []
        }
    }
})

const data = reactive({
    visible: false,
})


const open = () => {
    data.visible = true;
}

const close = () => {
    data.visible = false;
}

defineExpose({
    open,
    close
})


</script>

<style lang="less" scoped>
.col-box {
    width: 200px;
    height: 100%;
    border: 1px solid var(--borderColor);
    position: absolute;
    transition: all 0.3s;
    top: -1px;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;

    &.show {
        z-index: 9;
        opacity: 1;
        pointer-events: unset;
        transform: translateX(-210px);
    }

    .box-header {
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid var(--borderColor);
        display: flex;
        justify-content: space-between;

        .box-title {
            font-size: 14px;
        }

        .close-icon {
            cursor: pointer;
            color: #b6b6b6;

            &:hover {
                color: #333;
            }
        }
    }

    .box-content {
        padding: 5px;
    }
}

.col-data-list{

}
</style>